<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>

<div class="toolbar" id="toolbar">hello</div>

</body>
<script>
    /**
     *     DOM驱动 ---> 数据驱动
     *   1 . DOM ： Document Object Model -- 1.node 如何描述 dom
     *          1. 结构 ： 树状结构    原生js    -- appendChild ，removeChild （jquery-$(当前节点).remove()）,replaceChild
     *                                    --- insertBefore
     *                                 jquery    -- append 、remove 、replace 、before、after
     *              html
     *               |
     *         head   body
     *
     *         2. 单一节点：节点名称  属性 + 内容-- html + text
     *                                 原生js: 选择器-控制节点、创建节点 、 dom对象.属性名称= 值，dom对象.innerHTML
     *                                 、dom对象.innerText
     *                               选择器 -- jquery: $(selector) / $('<li></li>')、 $(selector).attr([属性名称],[属性值])
     *                                 $(selector).html(),$(selector).text()
     * */

</script>
</html>